<template>
  <div>
    <div>文章管理</div>
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-input v-model="state" placeholder="请输入内容" @select="handleSelect" style="width: 200px"></el-input>
    </el-row>
    <el-table
      :data="tableData" border style="width: 100%;">
      <el-table-column prop="title" label="标题" width="180px">
      </el-table-column>
      <el-table-column prop="previewImage" label="预览图" >
      </el-table-column>
      <el-table-column prop="viewCount" label="浏览量" >
      </el-table-column>
      <el-table-column prop="state" label="状态" >
      </el-table-column>
      <el-table-column prop="category" label="文章分类">
      </el-table-column>
      <el-table-column prop="addTime" label="添加时间" >
      </el-table-column>
      <el-table-column label="操作">
        <el-button type="primary">修改</el-button>
        <el-button type="danger">删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          title: '文章标题1',
          previewImage: 'http://example.com/image1.jpg',
          viewCount: 150,
          state: '已发布',
          category: '技术',
          addTime: '2024-07-02 10:00:00'
        },
        {
          title: '文章标题2',
          previewImage: 'http://example.com/image2.jpg',
          viewCount: 200,
          state: '草稿',
          category: '生活',
          addTime: '2024-07-01 09:30:00'
        },
        {
          title: '文章标题3',
          previewImage: 'http://example.com/image3.jpg',
          viewCount: 120,
          state: '待审核',
          category: '娱乐',
          addTime: '2024-06-30 15:45:00'
        }
      ]
    }
  },
  handleSelect () {
    return [
      {
        titleName: '搜索成功'
      }
    ]
  }
}
</script>
<style scoped>
.el-table {
  background-color: #FF0000;
}

.el-table th,
.el-table td {
  background-color: inherit; /* 继承 .el-table 的背景色 */
}

/* 如果你还想改变表格边框颜色 */
.el-table--border th,
.el-table--border td {
  border-right: 1px solid #FF0000;
  border-bottom: 1px solid #FF0000;
}

/* 如果需要移除单元格之间的间隙 */
.el-table th.is-leaf,
.el-table td {
  border: none;
}
</style>
